import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import { isToken } from '../utils/auth'
// 引入../utils/auth中的isToken方法判断是否存在token既用户是否登录
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/hot',
    name: 'hot',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Hot.vue')
  },
  {
    path: '/cart',
    name: 'cart',
    // 懒加载，访问到该路由时引入组件
    component: () => import('../views/cart'),
    meta: {
      needLogin: true
    }
  },
  {
    path: '/login',
    name: 'login',
    // 懒加载，访问到该路由时引入组件
    component: () => import('../views/login'),
    // meta元属性，可以再路由跳转时将值当参数传递，可以存贮一些自定义的数据在route对象中,这里用来说明登录的路由中是否隐藏底部导航这里给的值是true既要隐藏
    meta: {
      ishideFotter: true
    }
  },
  {
    path: '/reg',
    name: 'reg',
    // 懒加载，访问到该路由时引入组件
    component: () => import('../views/reg'),
    // meta元属性，可以再路由跳转时将值当参数传递，可以存贮一些自定义的数据在route对象中,这里用来说明登录的路由中是否隐藏底部导航，这里给的值是true既要隐藏
    meta: {
      ishideFotter: true
    }
  },
  {
    path: '/user',
    name: 'user',
    // 懒加载，访问到该路由时引入组件
    component: () => import('../views/user'),
    // meta使元属性，可以再路由跳转时将值当参数传递，可以存贮一些自定义的数据,这里用来说明该页面要不要检测用户有没有登录
    meta: {
      needLogin: true
    }
  }
]

const router = new VueRouter({
  routes
})
// beforeEach是在所有的路由跳转之前执行，常常用来做全局拦截，比如用户未登录不让访问列表页详情页
// to表示跳转到哪个路由，from表示由哪个路由跳转过来的
router.beforeEach((to, from, next) => {
  // console.group('before')
  // console.log(to)
  // console.log(from)
  // console.log(next)
  // next是个方法，表示继续执行，如果在beforeEach中不调用next就不再执行跳转到的路由的代码了
  // next()
  // console.groupEnd()
  // 如果跳转到的路由的meta.needLogin为true说明需要验证是否登录
  // 否则直接继续执行
  if (to.meta.needLogin) {
    // 要进行验证的页面如果有token，继续执行，没有跳转到登录页
    // 这里通过../utils/auth中的isToken方法判断是否存在token
    if (isToken()) {
      next()
    } else {
      // this.$router.push({name:'login'})
      next({ name: 'login' })
    }
  } else {
    next()
  }
})
// router.afterEach表示路由跳转之后执行
router.afterEach((to, from) => {
  // console.group('after')
  // console.log(to)
  // console.log(from)
  // console.groupEnd()
})
export default router
